<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/css/index.css" />
    <title>我的简历</title>
    <style media="print">
      body {
        margin: 0;
      }
    </style>
    <style>
      @media (max-width: 500px) {
        body {
          margin: 0;
        }
        article {
          width: auto;
          height: auto;
        }
        .bio img {
          display: none;
        }
        .skills .wrapper {
          flex-direction: column;
        }
        .skills .wrapper ul {
          padding-left: 5px;
        }
        #main {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <article>
      <section class="bio">
        <h1>文馨</h1>
        <div class="title">
          <div class="blocks"></div>
          <h2>基础信息</h2>
        </div>
        <p>个人信息：女 / 22岁 / 前端开发 / 河南鹤壁</p>
        <p>手机：155-2459-1860 / 微信：155-2459-1860 / 邮箱：wx1123041022@163.com</p>
      </section>
      <section>
        <div class="title">
          <div class="blocks"></div>
          <h2>教育经历</h2>
        </div>
        <p>
          <span><time>2017</time>~<time>2021</time></span
          >&nbsp; &nbsp; 本科，通信工程专业，大连大学
        </p>
      </section>
      <section class="projects">
        <div>
          <div class="blocks"></div>
          <h2>项目经历</h2>
        </div>
        <ol>
          <li>
            <header>
              <h3>电商后台管理系统</h3>
              <span>
                <a href="https://github.com/zhazha17/vue-shop">源码链接</a>
              </span>
            </header>
            <p>电商后台管理系统用于管理用户账号、权限管理（角色列表，权限列表）等业务功能</p>
            <ul>
              <li>项目利用 <strong>Vue3</strong> 框架进行整体设计</li>
              <li>项目利用 <strong>Vite</strong> 脚手架进行项目模板的快速生成</li>
              <li>项目利用 <strong>vue-router</strong> 做前端路由解决方案，进行组件之间的切换</li>
              <li>项目利用 <strong>Element UI</strong> 组件库美化结构样式</li>
              <li>项目利用 <strong>axios</strong> 来进行数据的发送与获取</li>
            </ul>
          </li>
          <li>
            <header>
              <h3>仿美团外卖项目</h3>
              <span>
                <a href="https://github.com/zhazha17/mshop">源码链接</a>
              </span>
            </header>
            <p>在单页面中实现页面的跳转，等一些简单的功能。（因为接口问题，很多功能无法实现）</p>
            <ul>
              <li>项目利用 <strong>Vue2</strong> 框架进行整体设计</li>
              <li>项目利用 <strong>Vue-cli</strong> 脚手架进行项目模板的快速生成</li>
              <li>项目利用 <strong>vue-router</strong> 做前端路由解决方案，进行组件之间的切换</li>
              <li>项目利用 <strong>mint-ui</strong> 移动端组件库美化结构样式</li>
              <li>项目利用移动端的 <strong>flex</strong> 弹性布局</li>
            </ul>
          </li>
          <li>
            <header>
              <h3>仿小米网站</h3>
              <span>
                <a href="https://gitee.com/zhazha17/git--xiaomi">源码链接</a>
                <a href="https://zhazha17.gitee.io/git--xiaomi/#">项目预览</a>
              </span>
            </header>
            <ul>
              <li>html / css / JavaScript</li>
              <li>利用原生的 scroll 实现返回顶部功能</li>
              <li>利用原生的 js 实现鼠标经过显示与隐藏</li>
            </ul>
          </li>
        </ol>
      </section>

      <section class="skills">
        <div>
          <div class="blocks"></div>
          <h2>技能</h2>
        </div>
        <div class="wrapper">
          <div id="main"></div>
          <ul>
            <li>熟悉 HTML、CSS、JavaScript，并能进行项目开发</li>
            <li>了解 ES6 新特性；了解 jQuery 的基础用法</li>
            <li>熟悉使用 <strong>Vue2</strong> / <strong>Vue3</strong> 及 Vue-router，Vue-cli，Vite 和 Element UI 组件库</li>
            <li>熟练使用 Npm，Webpack，Git 等工具</li>
            <li>了解 Node.js、Ajax、Express 后端开发</li>
          </ul>
        </div>
      </section>
      <section class="other">
        <div>
          <div class="blocks"></div>
          <h2>其他链接</h2>
        </div>
        <ul>
          <li><a href="https://blog.csdn.net/wxbwcx?type=lately">我的博客</a></li>
          <li><a href="https://gitee.com/zhazha17/dashboard/projects">我的 Gitee</a></li>
          <li><a href="https://github.com/zhazha17">我的 github</a></li>
        </ul>
      </section>
    </article>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
    <script src="src/main.js"></script>
  </body>
</html>
